<!--影片-->
<template>
    <div>
        <Toopbar></Toopbar>
        <div class="main">
            <section class="film-view">
                <div class="film-list-wrap">
                    <div class="film-list-nav">
                        <a href="#!/film">
                            <div class="cloosing now-playing">正在热映</div>
                        </a>
                        <a href="#!/film/coming-soon">
                            <div class="coming-soon">即将上映</div>
                        </a>
                    </div>
                    <div class="film-list">
                        <ul class="list-unstyled">
                            <li>
                                <div class="film-item">
                                    <div class="film-item-img">
                                        <div class="img-resp">
                                            <img class="img-item" src="../../assets/images/list-play-1.jpg" />
                                        </div>
                                    </div>
                                    <div class="film-desc">
                                        <div class="film-next-arrow">
                                            <i class="iconfont"></i>
                                        </div>
                                        <div class="film-grade">8.4</div>
                                        <div class="film-name">加勒比海盗5：死无对证</div>
                                        <div class="film-intro">三次大改档 船长又出航</div>
                                        <div class="film-counts">
                                            <span class="film-count-color1">148</span>
                                            <span >家影院上映　　</span>
                                            <span class="film-count-color1">1288548</span>
                                            <span>人购票  </span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>

                </div>
            </section>
        </div>
    </div>
</template>

<script>
    import Toopbar  from '../Patch/Toopbar.vue';
    export  default {
        components :{
            Toopbar,
            
        }
    }
</script> 

<style>
    *{margin: 0;padding: 0;box-sizing: border-box;}
    body{font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 14px;line-height: 1.42857143;color: #333;background-color: #fff;}
    body,input,button,select,textarea,table{font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;font-family: 'Microsoft YaHei', Tahoma, Helvetica, Arial, sans-serif;}
    a:hover{outline: none;}
    a,a:hover,a:focus{color: #333;text-decoration: none;}
    img{display: block; max-width: 100%;height: auto; vertical-align: middle;border: 0;}

    .img-resp{background-size: 100%;}
    .img-item{width: 100%;transition: all 1.2s ease;opacity: 1;}
    .film-view .film-intro {user-select: text;}

    .film-view .film-list-wrap{padding-left: 15px;padding-right: 15px;background-color: #f9f9f9;width: 100%;position: absolute;min-height: 100%;}
    .film-view .film-list-nav{height: 46px;margin: 0 auto;border-bottom: solid #fe6e00 1px;}
    .film-view .film-list{padding: 0;}
    .film-view .film-list-nav .now-playing, .film-view .film-list-nav .coming-soon{float: left;width: 50%;height: 100%;text-align: center;font-size: 16px;line-height: 46px;color: #6a6a6a;cursor: pointer;}
    .film-view .film-list-nav .choosing{color: #fe6e00;border-bottom: solid;}
    .film-view ul, .film-view li {margin: 0;padding: 0;list-style: none;}
    .film-view .film-list .film-item{width: 100%;padding: 20px 0;border-bottom: dashed 1px #c9c9c9;cursor: pointer;}
    .film-view .film-list .film-item .film-item-img{width: 60px;float: left;overflow: hidden;}
    .film-view .film-list .film-item .film-desc{padding-left: 15px;display: inline-block;width: 75%;}
    .film-view .film-list .film-item .film-desc .film-next-arrow{float: right;line-height: 29px;color: #c6c6c6;}
    .film-view .film-list .film-item .film-desc .film-grade{float: right;font-size: 16px;line-height: 32px;color: #fc7103;}
    .film-view .film-list .film-item .film-desc .film-name{font-size: 16px;line-height: 32px;color: #000;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
    .film-view .film-list .film-item .film-desc .film-intro{height: 24px;line-height: 24px;color: #8e8e8e;font-size: 12px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 100%;display: inline-block;}
    .film-view .film-list .film-item .film-desc .film-counts{line-height: 24px;color: #8e8e8e;font-size: 12px;}
    .film-view .film-list .film-item .film-desc .film-count-color1{color: #8aa2bf;}

    
</style>

